<main id="JBchange">
  <section class="JBcontent">
    <div class="title">合同基本信息</div>
    <div>
      <span>合同编号：</span>
      <input type="text" class="form-control" placeholder="非必填" v-model="contractDetail.cCode">
    </div>
    <div>
      <span>合同名称：</span>
      <input type="text" class="form-control" placeholder="非必填" v-model="contractDetail.name">
    </div>
    <div style="align-items: flex-start;">
      <span>备注:</span>
      <textarea class="form-control" style="height: 160px;width:580px;" v-model="contractDetail.memo" placeholder="非必填"></textarea>
    </div>
  </section>
  <!-- 自定义字段 -->
  <div class="mt-15">
  	<hl-custom-fileds type="CONTRACT" :data="contractDetail.tmpData" v-model="contractDetail.resData"></hl-custom-fileds>
  </div>

	<!-- 乙方 -->
  <section class="YFcontent">
    <div class="title">乙方</div>
    <div>
      <span>租赁方:</span>
      <hl-radio :data="zlfTypeList" v-model="contractDetail.zlfType"></hl-radio>
    </div>
    <div class="rowItem">
      <div>
        <span>客户名称：</span>
        <hl-autoComplete :data="companyList" width="310" :fetch-suggestions="getCompany"
          v-model="contractDetail.zlfCompany" @on-change="selectCompanyId"></hl-autoComplete>
      </div>
      <div>
        <span>所属行业：</span>
        <hl-select :data="industryList" v-model="contractDetail.zlfIndustryType" type="primary" width="310"></hl-select>
      </div>
    </div>
    <div class="rowItem">
      <div>
        <span>{{(contractDetail.zlfType + '') == 'C'?'纳税人识别号':'身份证号'}}：</span>
        <input type="text" class="form-control" v-model="contractDetail.idcode">
      </div>
      <div>
        <span>{{(contractDetail.zlfType + '') == 'C'?'公司':'个人'}}邮箱：</span>
        <input type="text" class="form-control" placeholder="非必填" v-model="contractDetail.email">
      </div>
    </div>
    <div class="rowItem">
      <div>
        <span>法人：</span>
        <input type="text" class="form-control" style="width: 120px" v-model="contractDetail.zlfLperson"
          placeholder="非必填">
        <input type="text" class="form-control ml-10" placeholder="联系电话（非必填）" style="width: 180px"
          v-model="contractDetail.zlfLphone">
      </div>
      <div>
        <span>联系人：</span>
        <input type="text" class="form-control" style="width: 120px" v-model="contractDetail.zlfSperson">
        <input type="text" class="form-control ml-10" placeholder="联系电话" style="width: 180px"
          v-model="contractDetail.zlfSphone">
      </div>
    </div>
		<div>
		  <span>通讯地址：</span>
		  <input type="text" style="width: 820px" class="form-control" v-model="contractDetail.zlfAddress">
		</div>
    <div class="rowItem">
      <div>
        <span>渠道分类：</span>
        <hl-select :data="channelType" v-model="contractDetail.channelCategoryCode" type="primary" width="310">
        </hl-select>
      </div>
      <div>
        <span>渠道名称：</span>
        <hl-autoComplete :data="channelName" width="310" :fetch-suggestions="getChannelName"
          v-model="contractDetail.channelNameVal" @on-change="selectchannelName"></hl-autoComplete>
      </div>
    </div>

  </section>
   <!-- 中介信息 -->
   <div class="border-b pb-10 hl-global-detail-box mb-10" v-if="contractDetail.mediationData">
    <div class="title">中介</div>
    <div class="hl-row">
      <div class="hl-row-item" style="width: 100%;">
        <div class="title">中介名称：</div>
        <div class="item">{{contractDetail.mediationData.channelCategoryName}}</div>
      </div>
    </div>
    <div class="hl-row">
      <div class="hl-row-item">
        <div class="title">转介人：</div>
        <div class="item">{{contractDetail.mediationData.intermediaryName}}</div>
      </div>
      <div class="hl-row-item">
        <div class="title">联系方式：</div>
        <div class="item">{{contractDetail.mediationData.intermediaryPhone}}</div>
      </div>
    </div>
    <div class="hl-row">
      <div class="hl-row-item">
        <div class="title">身份证号：</div>
        <div class="item">{{contractDetail.mediationData.intermediaryIdCode}}</div>
      </div>
      <div class="hl-row-item">
        <div class="title">通讯地址：</div>
        <div class="item">{{contractDetail.mediationData.intermediaryAddress}}</div>
      </div>
    </div>
  </div>
  <hl-button type="primary" @on-click="syncData">同步招商数据</hl-button>
  <hl-button type="outline" @on-click="previous">上一步</hl-button>
  <hl-button type="outline" @on-click="next">下一步</hl-button>
</main>
<style>
  .hl-radio-container li{
    margin-bottom: 10px;
  }
  main {
    font-size: 14px;
    color: #666;
  }

  .YFcontent,
  .JBcontent {
    padding-bottom: 20px;
    border-bottom: 1px solid#F2F2F2;
    margin-bottom: 20px;
  }

  .YFcontent>div,
  .JBcontent>div {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
  }

  .rowItem>div {
    display: flex;
    align-items: center;
  }

  .title {
    color: #A5AAB7
  }

  .JBcontent input {
    width: 240px;
  }

  .YFcontent input {
    width: 310px;
  }

  .JBcontent>div>span {
    display: flex;
    width: 80px;
  }

  .rowItem>div>span,
  .YFcontent>div>span {
    display: flex;
    width: 110px;
  }

  .rowItem>div:nth-child(odd) {
    margin-right: 90px;
  }

  .custom_container {
    display: flex;
    flex-wrap: wrap
  }

  .custom_container>div {
    display: flex;
    margin-bottom: 10px;
    margin-right: 20px
  }

  .custom_title {
    padding-left: 8px;
    width: 105px;
    position: relative;
  }

  .custom_title>span {
    position: absolute;
    left: 0px;
  }

  .hl-checkbox-container ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap
  }

  .hl-checkbox-container .item {
    margin-bottom: 0
  }

  .alignItems {
    align-items: flex-start !important;
  }
</style>
<script src="modules/contratchange/scripts/basic_change.js" charset="utf-8"></script>
